<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('前置导航页')" />
    <th:block th:include="include :: layui-css" />
    <style>
        .layui-nav a {
            text-decoration: none;
        }
        .tab-title-1 .layui-tab-close{
            display: none!important;
        }
        dd a span{
            margin-left: 14px;
        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--头部-->
    <div class="layui-header">
        <div class="layui-logo">前置系统</div>
        <!--左侧小导航-->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <!--<span>刷新</span>-->
            </li>

        </ul>
        <!--右侧小导航-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span th:text="${sysUser.userNickname+'('+sysUser.sysRole.roleName+')'}"></span>
                </a>
                <!--<dl class="layui-nav-child">
                    <dd><a href="javascript:;" id="t_t" th:src="@{/SysUserPage/ryUser}"  class="site-demo-active" data-type="tabAdd" >修改个人信息</a></dd>
                </dl>-->
            </li>
            <li class="layui-nav-item" id="loginOutButton"><a th:href="@{/loginOut}">退出</a></li>
        </ul>
    </div>
    <!--左侧导航-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="left_nav">
                <li class="layui-nav-item layui-nav-itemed" th:if="${sysUser.sysRole.roleId==1}">
                    <a class="" href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" th:src="@{/ConfigPage}" id="1_1" class="site-demo-active" data-type="tabAdd"><span>审批配置</span></a></dd>
                        <dd><a href="javascript:;" th:src="@{/SysUserPage}" id="1_2" class="site-demo-active" data-type="tabAdd"><span>用户管理</span></a></dd>
                        <dd><a href="javascript:;" th:src="@{/SystemConfigPage}" id="1_3" class="site-demo-active" data-type="tabAdd"><span>系统配置</span></a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" th:if="${sysUser.sysRole.roleId!=1}">
                    <a href="javascript:;">日志管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" th:src="@{/logBusiness}" id="2_1" class="site-demo-active" data-type="tabAdd"><span>业务日志</span></a></dd>
                        <dd><a href="javascript:;" th:src="@{/logOperate}"  id="2_2" class="site-demo-active"  data-type="tabAdd"><span>操作日志</span></a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>
    <!--中间内容-->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab" lay-filter="content-title" lay-allowclose="true">
            <!--头部tab-->
            <ul class="layui-tab-title">
                <li class="layui-this tab-title-1" lay-id="1_0">首页</li>
            </ul>
            <!--tab内容-->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <iframe class="RuoYi_iframe" data-id="/main" name="iframe1" width="100%" height="700px"
                            th:src="@{/main}" frameborder="0" seamless></iframe>
                </div>
            </div>
        </div>
    </div>
    <!--尾部-->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © cn.made-in-china.com - 第二研究院七〇六所
    </div>
</div>

<!-- 全局js -->
<th:block th:include="include :: common-js" />
<th:block th:include="include :: layui-js" />
<script>
    var path = ctx + 'SysUserPage';

    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var contentTitle = "content-title";
        var left_nav = "left_nav";
        //监听导航点击
        /*element.on('nav('+left_nav+')', function(elem){
            console.log(elem)
            layer.msg(elem.text());
        });*/

        //触发事件(elem是左侧导航栏元素，el是title元素，element是layui元素)
        var active = {
            tabAdd: function(elem){
                console.log(elem)
                var ischange = false;
                //看是否已经存在
                $(".layui-tab-title").children().each(
                    function(index,el){
                        var lay_id = $(el).attr("lay-id");
                        if (elem.attr("id")==lay_id){
                            element.tabChange(contentTitle, lay_id);
                            ischange = true;
                        }
                    });

                if (ischange){
                    return;
                }
                //新增一个Tab项
                element.tabAdd(contentTitle, {

                    title: elem.text() //标题
                    ,content: '<iframe class="RuoYi_iframe" ' +
                        'data-id="'+elem.attr("src")+'" ' +
                        'name="iframe"'+elem.attr("id")+' width="100%" height="1000px"\n' +
                        'src="'+elem.attr("src")+'" ' +
                        'frameborder="0" seamless></iframe>'
                    ,id: elem.attr("id")
                })
                element.tabChange(contentTitle, elem.attr("id"));
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete(contentTitle, '44'); //删除：“商品管理”
                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange(contentTitle, '22');
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });

</script>
</body>
</html>